
<template>

    <div class="send-box">
    <textarea 
  class="send-msg send-body" 
  ref="textareaRef" 
  placeholder="shift+回车是换行" 
  v-model="message" 
  @keydown.enter.exact.prevent="handle_send"
></textarea>
    <send_btn class="send-btn" :isSend="isSend" @click="handle_send" ref="sendBtn"></send_btn>
  </div>

</template>

<style >
.send-btn
{
  margin-left: 40px;
}
.send-box
{
  bottom: 20px;
  width: 100%;
  justify-content: center;
  display: flex;
  align-items: center;
  border-radius: 15px;
  box-sizing: border-box;
  margin-bottom: 10px;
  margin-top: 10px;
}
.send-body
{

  font-family: PingFang SC;
  font-style: normal;
  height: auto;
  max-height: 370px;
  width: 80%;
  background-color: #FFFFFF;
  padding: 10px;
  border-radius: 15px;
  border-style: solid;
  border-width: 0.7px;
  border-color: #578aef;
  resize: none;
  outline: none;
  scrollbar-width: none;
  box-sizing: border-box;
  box-shadow: 3px 3px 12px 2px #6f8fd096;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;

}
.send-msg
{
  font-size: 21px;
  caret-color: #2454ff;
}
.send-body:focus{
  -webkit-transform: scale(1.05);
  transform: scale(1.05);
}

</style>

<script lang="ts">
import { defineComponent, ref, onMounted } from 'vue';
import send_btn from "./SendButton.vue";
import { ElMessage } from "element-plus";
import { useCanSendStore } from "@/stores/canSend";

const canSendStore = useCanSendStore();

export default defineComponent({
  components: {
    send_btn
  },
  props: {
    isSend: {
      type: Boolean as () => boolean,
      required: true
    }
  },
  setup(props, { emit }) {
    const message = ref<string>('');
    // const canSend = true;
    const textareaRef = ref<HTMLTextAreaElement | null>(null); // 替代 this.$refs["text-msg"]

    // 发送完内容后恢复输入框高度
    const recover_input = (): void => {
      if (textareaRef.value) {
        textareaRef.value.style.height = "auto";
      }
    };

    const input_style = (): void => {
      if (!textareaRef.value) return;

      const textarea = textareaRef.value;
      const maxHeight = 340; // 设置最大高度

      textarea.addEventListener('input', function () {
        // 重置高度以适应内容
        textarea.style.height = 'auto';

        // 如果内容高度大于最大高度，则设置高度为最大高度并启用滚动条
        if (textarea.scrollHeight > maxHeight) {
          textarea.style.height = maxHeight + 'px';
          textarea.style.overflowY = 'scroll';
        } else {
          // 否则，设置高度以适应内容，并禁用滚动条
          textarea.style.height = textarea.scrollHeight + 'px';
          textarea.style.overflowY = 'hidden';
        }
      });
    };

    const handle_send = (): void => {
      if (canSendStore.canSend) {
        if (message.value.trim() === '') {
          ElMessage.info('内容不能为空');
          return;
        }

        canSendStore.setCanSend(false);
        emit('send_message', message.value);
        message.value = '';
        recover_input();
      } else {
        ElMessage({
          message: '请等待消息回复哦...',
          type: 'info'
        });
        return;
      }
    };

    onMounted(() => {
      input_style();
    });

    return {
      message,
      // canSend,
      recover_input,
      handle_send,
      textareaRef // 模板中使用该 ref
    };
  }
});
</script>